<template>
  <view>
    <u-navbar
      :title="title"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back
    >
    </u-navbar>
    <!-- 绑定手机号 -->
    <view class="input-box" style="margin-top: 180rpx;" v-if="is_change === 0">

      <view style="font-weight: bold;font-size: 32rpx;">绑定手机号</view>

      <view class="phone-input">
        <u-input style="width: 100%;" v-model="user_phone" type="number" placeholderStyle="color: #b8b8b8"
                 placeholder="请输入手机号" border="none"/>
      </view>

      <view class="phone-input">
        <u-input style="width: 60%;" v-model="user_code" type="number" placeholderStyle="color: #b8b8b8"
                 placeholder="请输验证码" border="none"/>
        <view class="code-brn" @click="getCode">{{ !verify ? '获取图形验证码' : codeText }}</view>
      </view>
      <u-code ref="uCode" @change="codeChange"></u-code>
      <view class="login-btn" @click="phone_login">
        绑定并注册
      </view>
    </view>

    <!-- 修改登录密码 -->
    <view class="input-box" style="margin-top: 50rpx;" v-if="is_change == 1">

      <view style="font-weight: bold;font-size: 28rpx;">
        手机号：{{ user.username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
      </view>

      <view class="phone-input">
        <u-input style="width: 100%;" v-model="form.new_password" type="password" placeholderStyle="color: #b8b8b8"
                 placeholder="数字,字母,符号组合不少于6位的密码" border="none" @blur="handleRegPasseord"/>
      </view>

      <view class="phone-input">
        <u-input style="width: 100%;" v-model="form.re_password" type="password" placeholderStyle="color: #b8b8b8"
                 placeholder="确认新密码" border="none"/>
      </view>
      <view class="login-btn" @click="handleUpdatePassword()">
        确定修改
      </view>
    </view>

    <!-- 设置提现密码 -->
    <view class="input-box" style="margin-top: 50rpx;" v-if="is_change == 2">

      <!-- <view style="font-weight: bold;font-size: 28rpx;">手机号：{{user.username}}</view> -->
      <view class="phone-input">
        <u-input style="width: 100%;" v-model="cashForm.code" type="text" placeholderStyle="color: #b8b8b8"
                 placeholder="输入手机验证码" border="none"/>
      </view>
      <view class="phone-input">
        <u-input style="width: 100%;" v-model="cashForm.cash_password" type="password" placeholderStyle="color: #b8b8b8"
                 placeholder="设置提现密码" border="none"/>
      </view>

      <view class="phone-input">
        <u-input style="width: 100%;" v-model="cashForm.re_cash_password" type="password"
                 placeholderStyle="color: #b8b8b8"
                 placeholder="确认新密码" border="none"/>
      </view>
      <view class="login-btn" @click="handleUpdateCashPassword()">
        确定
      </view>
    </view>

    <!-- 换绑手机号 -->
    <view class="input-box" style="margin-top: 50rpx;" v-if="is_change === 3">

      <view style="font-weight: bold;font-size: 28rpx;">
        原手机号：{{ user.username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
      </view>
      <view style="margin-top: 10rpx;font-size: 24rpx;color: red;">
        <text>注：验证码是发至此手机号</text>
      </view>

      <view class="phone-input">
        <u-input style="width: 100%;" v-model="changeForm.tel" type="number" placeholderStyle="color: #b8b8b8"
                 placeholder="请输入手机号" border="none"/>
      </view>

      <view class="phone-input">
        <u-input style="width: 70%;" v-model="changeForm.code" type="number" placeholderStyle="color: #b8b8b8"
                 placeholder="请输验证码" border="none"/>
        <view class="code-brn" @click="getCode">{{ codeText }}</view>
      </view>
      <u-code ref="uCode" @change="codeChange"></u-code>
      <view class="login-btn" @click="phone_login">
        确定换绑
      </view>
    </view>


    <u-popup :show="show" mode="center" :closeable="true" :round="10" @close="show = false">
      <view class="shadow_box">
        <view class="img_code">图形验证码:</view>
        <image style="width: 160rpx;height: 50rpx;margin: 20rpx 0;" @click="Getverify" :src="verifyCodeImg"></image>
<!--        <u-input style="width: 70%;" v-model="verify" type="number" placeholderStyle="color: #b8b8b8"-->
<!--                 placeholder="请输图形验证码" border="none"/>-->

        <view class="phone-input">
          <u-input
            border="none"
            class="inputWidth"
            v-model="verify"
            type="number"
            placeholderStyle="divcolor"
            placeholder="请输图形验证码"
          />
        </view>
        <u-button type="primary" shape="square" @click="yesGetCode">确定</u-button>
      </view>
    </u-popup>

  </view>
</template>

<script>
import {conUtils} from "@/utils/conUtils";
import {useUserInfoStore} from "@/stores/modules/userInfo";
import {
  bindTelAPI,
  changeTelAPI,
  getImageCodeAPI,
  giveMemberAPI,
  handleCodeAPI,
  updatePasswordAPI
} from "@/services/me";
import {getLoginCode} from "@/services/login";

const app = getApp();

// 判断公众号截取code
// #ifdef H5
const getUrlParam = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// #endif

export default {
  data() {
    return {
      background: {
        backgroundImage: 'linear-gradient(90deg, #fff, #fff)'
      },
      codeText: '获取手机验证码',
      show: false,
      check_on: !1,
      mobile: '',
      user_phone: '',
      user_code: '',
      second: '',
      password: '',
      userInfoStore: useUserInfoStore(),
      UserUid: '',
      Openid: '',
      Name: '',
      toux: '',
      Code: '',

      verify: '',
      verifyCodeImg: '',
      is_change: 0,
      user: {
        username: ''
      },
      form: {
        new_password: '',
        re_password: ''
      },
      title: '绑定手机号',
      cashForm: {
        cash_password: '',
        re_cash_password: '',
        code: ''
      },
      changeForm: {
        tel: '',
        code: ''
      }
    }
  },
  onLoad(ops) {
    conUtils("onLoad", ops)
    this.UserUid = ops.UnionId
    this.Openid = ops.OpenId
    this.Name = ops.name
    this.toux = ops.Toux
    if (ops.is_change) {
      this.is_change = parseInt(ops.is_change)
      if (this.is_change === 1) {
        this.title = '修改登录密码'
      } else if (this.is_change === 2) {
        this.title = '设置提现密码'
        this.handleGetCode()
      } else if (this.is_change === 3) {
        this.title = '换绑手机号'
      }
      conUtils(" this.title", this.title)
      this.handleUserInfo()
    }
  },
  methods: {
    // 获取用户信息
    handleUserInfo() {
      this.user = this.userInfoStore.userInfo
    },
    // 获取设置提现密码的个人验证码
    async handleGetCode() {
      const res = await handleCodeAPI()
      await uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    },
    // 设置提现密码确认
    async handleUpdateCashPassword() {

    },
    // 验证密码
    handleRegPasseord(e) {
      if (e.length < 7) {
        uni.showToast({
          title: '密码必须大于6位数',
          icon: 'none'
        })
      }
    },
    // 修改密码确认
    async handleUpdatePassword() {
      const check = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{8,16}$/
      if (!check.test(this.form.new_password)) {
        await uni.showToast({
          title: '密码必须包含字母，数字和符号8位数以上',
          icon: 'none'
        })
        return
      }
      conUtils("this.form.new_password", this.form.new_password)
      conUtils("this.form.re_password", this.form.re_password)
      if (this.form.new_password !== this.form.re_password) {
        await uni.showToast({
          title: '两次输入密码不一致',
          icon: 'none'
        })
        return
      }
      const res = await updatePasswordAPI(this.form)
      await uni.showToast({
        title: res.msg,
        icon: 'none'
      })
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/me/me'
        })
      }, 1000)
    },
    codeChange(text) {
      this.codeText = text;
    },
    async Getverify() {
      let that = this
      const res = await getImageCodeAPI({
        tel: that.user_phone,
        type: 'base64'
      })
      this.verifyCodeImg = res.result.base64
    },
    yesGetCode(){
      this.show = false
      this.getCode()
    },
    // 获取验证码时
    async getCode() {
      let that = this
      if (that.is_change === 0) {
        if (that.user_phone === '') {
          await uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }
        if (that.verify === '') {
          if (!(/^1[3456789]\d{9}$/.test(that.user_phone))) {
            await uni.showToast({
              title: '手机号有误，请重填',
              icon: 'none'
            })
            return
          }
          that.show = true
          await that.Getverify()
        } else {
          if (that.verify === '') {
            await uni.showToast({
              title: '图形验证码不能为空',
              icon: 'none'
            })
            return
          }
          if (that.$refs.uCode.canGetCode) {
            // 向后端请求验证码
            await getLoginCode({tel: that.user_phone, image_code: that.verify})
            that.$refs.uCode.start();
          } else {
            that.$u.toast('倒计时结束后再发送');
          }
        }
      }
      if (that.is_change === 3) {
        if (that.changeForm.tel === '') {
          await uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }
        if (that.$refs.uCode.canGetCode) {
          // 向后端请求验证码
          await uni.showLoading({
            title: '正在获取验证码'
          })
          await handleCodeAPI()
          that.$refs.uCode.start();
        } else {
          that.$u.toast('倒计时结束后再发送');
        }
      }
    },
    phone_login: async function () {
      const that = this;
      // 绑定手机号
      if (that.is_change === 0) {
        if (!this.user_phone) {
          await uni.showToast({
            title: '手机号不能为空',
            icon: 'none',
            duration: 1500
          });
          return false;
        }
        if (!this.user_code) {
          await uni.showToast({
            title: '验证码不能为空',
            icon: 'none',
            duration: 1500
          });
          return false;
        }
        const res = await bindTelAPI({
          tel: that.user_phone,
          code: that.user_code
        })
        await uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        that.verify = ''
        await that.handleGiveMember()
      }
      // 换绑手机号
      if (that.is_change === 3) {
        if (!this.changeForm.tel) {
          await uni.showToast({
            title: '手机号不能为空',
            icon: 'none',
            duration: 1500
          });
          return false;
        }
        if (!this.changeForm.code) {
          await uni.showToast({
            title: '验证码不能为空',
            icon: 'none',
            duration: 1500
          });
          return false;
        }
        const res = await changeTelAPI(that.changeForm)
        await uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        setTimeout(() => {
          that.verify = ''
          uni.switchTab({
            url: '/pages/me/me'
          })
        }, 2000)
      }
    },
    // 绑定手机号成功后,领取赠送一个月会员
    async handleGiveMember() {
      const res = await giveMemberAPI()
      await uni.showToast({
        title: res.msg,
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 1000)
    },
  }
}
</script>
<style>
page {
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
page {
  background-color: #fff;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
}

.shadow_box {
  box-sizing: border-box;
  padding: 60rpx 40rpx;

  .img_code {
    font-size: 28rpx;
    font-weight: bold;
  }
}

.logo {
  margin-top: 150rpx;
  text-align: center;
  margin-bottom: 70rpx;

  image {
    width: 230rpx;
  }
}

.input-box {
  width: 80%;
  margin: 0 auto;
}

.phone-input {
  background-color: #F7F8FA;
  margin: 30rpx 0;
  padding: 15rpx 30rpx;
  border-radius: 200rpx;
  border: 1px solid #F7F8FA;
  display: flex;
  color: #666666;
  align-items: center;

  //box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.05);
  u-button {
    margin-left: auto;
  }
}

.divcolor {
  color: #666;
}

.code-brn {
  width: 260rpx;
  color: #007AFF;
  padding: 10rpx 4rpx;
  text-align: center;
}

.login-btn {
  height: 100rpx;
  border-radius: 200rpx;
  background-image: linear-gradient(90deg, #FC754A, #FEBC5B);
  align-self: center;
  width: 600rpx;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 100rpx;
  color: #FFFFFF;
  margin: 70rpx auto 20rpx;
  box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.05);
}

.login-wrap {
  position: relative;
  height: 120rpx;
  color: #999999;
  margin-top: 40rpx;

  .MPlogin-btn {
    height: 100rpx;
    width: 100rpx !important;
    border-radius: 200rpx;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
  }

  image {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
  }

  uni-button:after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0 solid rgba(0, 0, 0, .2) !important;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
  }
}

.disanf {
  /* #ifdef H5 */
  padding-top: 50rpx;
  /* #endif */

  /* #ifdef MP-WEIXIN || APP-PLUS */
  padding-top: 190rpx;
  /* #endif */
  text-align: center;
  color: #999999;

  image {
    width: 102rpx;
  }
}

.xieyi {
  display: flex;
  align-items: center;
}

.protocol {
  width: 78%;
  color: #999;
  padding: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  font-size: 24rpx;
  justify-content: center;
  position: absolute;
  bottom: 100rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.check_icon {
  width: 34rpx;
  height: 34rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}

.change_login {
  justify-content: center;
  color: #666666;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  width: 60%;
  margin: 40rpx auto 0;

  .zhucetitle {
    text-align: center;
  }
}

.bigBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10% 15px 0;
}

.phone_login {
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  height: auto;
  line-height: 40px;
  color: #555555;
  text-align: center;
}

.input {
  width: 100%;
  height: 45px;
  margin-bottom: 25px;
  border-radius: 6px;
  margin-top: 30px;
}

.input input {
  box-sizing: border-box;
  padding-left: 10px;
  line-height: 45px;
  border-radius: 4px;
  height: 100%;
  border: 1px solid #cccccc;
}

.set_code {
  width: 100%;
}

.set_code input {
  width: 60%;
  float: left;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.set_code view {
  display: inline-block;
  width: 40%;
  float: left;
  line-height: 45px;
  background-color: #FB9360;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 0 6px 6px 0
}

.login {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: white;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  margin-top: 20px;
  border-radius: 30px;
}
</style>
